<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{color: color}">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";

export default defineComponent({
  name: 'RenderSvg',
  props: {
    name: {
      type: String,
      required: true
    },
    iconClass: {
      type: String,
    },
    color: {
      type: String,
      default: ''
    },
    size: {
      type: [Number, String],
    },
  },
  setup(props) {
    const iconName = computed(()=> {
      const name = props.name || props.iconClass as string;
      return `#icon-${name}`
    });
    const svgClass = computed(()=> {
      const name = props.name || props.iconClass as string;
      if (name) {
        return `svg-icon icon-${name}`
      }
      return 'svg-icon'
    });
    return {
      iconName,
      svgClass
    }
  }
})
</script>

<style scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
  }
</style>
